<template>
	<div>
		<!-- 筛选 -->
		<el-row>
			<el-col :span="1">
				<b>状态:</b>
			</el-col>
			<el-col :span="2" v-for="(v, i) in stateTypes" :key="i">
				<el-button :type="v === type ? 'primary' : 'default'" @click="changeType(v)">{{ v }}</el-button>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="1">
				<b>搜索:</b>
			</el-col>
			<el-col :span="20">
				<el-input placeholder="请搜索数据" v-model.trim="searchValue" @input="onHandleSearch"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="onHandleSearch">搜索</el-button>
			</el-col>
		</el-row>
		{{ type }}
		<!-- 表格 -->
		<el-table :data="dataList" height="450">
			<el-table-column prop="id" label="id" fixed />
			<el-table-column prop="key" label="key" />
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="date" label="日期" />
			<el-table-column prop="type" label="状态" />
		</el-table>

		<!-- 分页器 -->
		<el-pagination
			background
			layout="total, sizes, prev, pager, next, jumper"
			:total="totalCount"
			:page-sizes="[10, 15, 20]"
			@size-change="changePageSize"
			@current-change="changePageCode"
		></el-pagination>
	</div>
</template>

<script lang="ts" setup>
// 引入
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { debounce } from 'lodash'
interface ListItemType {
	key: string
	id: string
	title: string
	date: string
	type: '已发货' | '未发货' | '运输中' | '已完成'
}

/****************************  分页  **************************************/
// 分页参数
const pageCode = ref<number>(1)
const pageSize = ref<number>(10)
// 数据总数
const totalCount = ref<number>(0)
// 响应式数据
const dataList = ref<ListItemType[]>([])
// 获取数据的方法
const fetchDataList = async (pageCode: number, pageSize: number, type: string, searchValue: string) => {
	const resp = await axios.get('/api/list', { params: { pageCode, pageSize, type, searchValue } });
	const { code, data, mess, total } = resp.data

	if (code === 0) {
		dataList.value = data
		totalCount.value = total
		ElMessage({
			type: 'success',
			message: `获取了${data.length}条数据`
		})
	} else {
		ElMessage({
			type: 'error',
			message: mess
		})
	}
}
// 分页器页码改变事件
const changePageCode = (newPageCode: number) => {
	pageCode.value = newPageCode
	fetchDataList(pageCode.value, pageSize.value, type.value, searchValue.value)
}
// 分页器每页个数改变事件
const changePageSize = (newPageSize: number) => {
	pageSize.value = newPageSize
	fetchDataList(pageCode.value, pageSize.value, type.value, searchValue.value)
}
// 生命周期
onMounted(() => {
	fetchDataList(pageCode.value, pageSize.value)
})


/****************************  筛选  **************************************/
// tab 切换数据
const stateTypes = ref(['全部', '已发货', '未发货', '运输中', '已完成'])
const type = ref('全部')


// 状态改变函数
const changeType = (v: string) => {
	type.value = v
	fetchDataList(pageCode.value, pageSize.value, type.value, searchValue.value)
}


// 搜索的数据
const searchValue = ref('')

// 搜索函数 （注意防抖）
const onHandleSearch = debounce(() => {
	fetchDataList(pageCode.value, pageSize.value, type.value, searchValue.value)
}, 400)
</script>


<style scoped>
.el-row {
	margin-bottom: 20px;
}
</style>